<!--
 * @Author: 2112778581 2112778581@qq.com
 * @Date: 2024-01-02 14:15:10
 * @LastEditors: 2112778581 2112778581@qq.com
 * @LastEditTime: 2024-01-02 14:25:07
 * @FilePath: \my-sjksh\canvas\basic.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas基础- 在画布正中心画一个正方形</title>
    <style>
        canvas {
            background: rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <canvas width="512" height="512"></canvas>
    <script>

        const canvas = document.querySelector('canvas')

        const context = canvas.getContext('2d')

        // context 下大概有两类api
        // 一类是设置状态的api, 
        // 绘图api

        // context.rect(0.5 * canvas.width, 0.5 * canvas.height, 100, 100)
        const rectSize = [100, 100]
        context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1])
        context.fillStyle = 'red'
        context.beginPath()
        // 这样写不在正中心
        // context.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize)

        // 这样写就是正中心了
        // context.rect(0.5 * (canvas.width - rectSize[0]), 0.5 * (canvas.height - rectSize[1]), ...rectSize)

        // 
        context.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize)
        // 

        context.fill()


    </script>
</body>
</html>